<template>
  <div class="login-wrap">
    <div class="ms-title">
      <div>
        <h1 style="margin-left:50px;font-size:40px">
          袋鼠好车商家系统
        </h1>
      </div>
    </div>
    <div class="ms-login">
      <form class="el-form demo-ruleForm">
        <div class="el-form-item is-required">
          <div class="el-form-item__content" style="margin-left: 0px;">
            <p class="login-title">用户名</p>
            <input type="text" v-model="account" placeholder="用户名" class="username">
          </div>
        </div>
        <div class="el-form-item is-required">
          <div class="el-form-item__content" style="margin-left: 0px;">
            <p class="login-title">密码</p>
            <input type="password" v-model="password" placeholder="密码" class="password">
          </div>
        </div>
        <div class="login-btn">
          <button type="button" class="el-button el-button--primary" @click="signIn">
            <span>登录</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  import sign from '@/models/sign'
  import md5 from 'js-md5'

  export default {
    data () {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      signIn () {
        let password = md5(this.password + 'sys_dshc')
        sign.signIn(this.account, password).then(r => {
          if (r.code === 200) {
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
            this.$store.dispatch('signIn', r).then(() => {
              setTimeout(() => {
                this.$router.push({
                  path: `/`
                })
              }, 2000)
            })
          } else {
            this.$Message.error({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          console.log(r)
        })
      }
    }
  }
</script>
